<template>
  <van-cell center :title="isMatchMode ? '自动匹配': '普通模式'">
    <template #right-icon>
      <van-switch v-model="isMatchMode" />
    </template>
  </van-cell>
  <UserCardList :userList="userList" :loading="loading" />
</template>

<script setup lang="ts">
import { getMatchList, getRecommendList } from '@/api'
import type { UserType } from '@/modules/user'
import { onMounted, ref, reactive, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import UserCardList from '@/components/UserCardList/index.vue'

defineExpose({
  name: '首页',
})

const route = useRoute()
const isMatchMode = ref(false)
const userList = ref<UserType[]>([])
const pageParams = reactive({
  pageNum: 1,
  pageSize: 10,
})
const loading = ref(false)
onMounted(() => {
  getUserList()
})

const getUserList = async () => {
  await getRecommendList(pageParams).then((res) => {
    const { code, data: {records} } = res
    if (code === 200) {
      userList.value = records
      userList.value.forEach((item: UserType) => {
        if (item.tags) {
          item.tags = JSON.parse(item.tags)
        }
      })
    }
  }).catch(error => {
    console.log(error)
  })
}
const doMatch = async () => {
  const num = 10;
  getMatchList(num).then(res => {
    const { code, data } = res
    if (code === 200) {
      userList.value = data
      userList.value.forEach((item: UserType) => {
        if (item.tags) {
          item.tags = JSON.parse(item.tags)
        }
      })
    }
  }).catch(error => {
    console.log(error)
  })
}
watchEffect( async () => {
  loading.value = true
  if (isMatchMode.value) {
    await doMatch()
  } else {
    await getUserList()
  }
  loading.value = false
})
</script>
